<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
<title>重置密码</title>
<link rel="stylesheet" href="css/style.css">
<style>
.hei{
	height: 20px;
}
#hb{
height:40px;
}	
#slider {
	margin:20px auto;
	width:300px;
	height:40px;
	position:relative;
	border-radius:2px;
	background-color:#dae2d0;
	overflow:hidden;
	text-align:center;
	user-select:none;
	-moz-user-select:none;
	-webkit-user-select:none
}
#slider_bg {
	position:absolute;
	left:0;
	top:0;
	height:100%;
	background-color:#7ac23c;
	z-index:1
}
#label {
	width:46px;
	position:absolute;
	left:0;
	top:0;
	height:38px;
	line-height:38px;
	border:1px solid #ccc;
	background:#fff;
	z-index:3;
	cursor:move;
	color:#ff9e77;
	font-size:16px;
	font-weight:900
}
#labelTip {
	position:absolute;
	left:0;
	width:100%;
	height:100%;
	font-size:13px;
	font-family:microsoft yahei,serif;
	color:#787878;
	line-height:38px;
	text-align:center;
	z-index:2
}
#complexitywrap{
	margin: auto;
	width:60%;
	}
	#code{	
		width: 60%;
		margin-left: 0%;
	}
	#send{
		width: 30%;
		float: right;
	}
	#hh{
		margin-top: 10px;
	}
	#send{
	background-color: lightgreen;
	margin-right: 0px;
	}
	#comm{
	margin:auto;
	width: 30%;
	background-color: chartreuse;
	top:0px;
	}
	#checkphone{
	height: 24px;
	color:red;
	}
	#checkwd{
	float-right:100px;
	height: 40px;
	color:red;
	font-size: 15px;
	}
	#bigbox{
	background-image: url("./注册_files/yuga.jpg");
	}
	#hb{
	color:red;
	}
	#minbox{
	float:right;
	width:30%;
	height:36px;
	color:white;
	}
	#back{
	border:0px;background-color:transparent;
	font-size: 20px;
	color: lightgreen;
	}
	#title{
	color:whitesmoke;
	}
	
</style>
<script src="http://www.jq22.com/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jquery.complexify.js"></script>
<script src="js/jquery.placeholder.min.js"></script>
<script>
var hua=false;
$(function(){
			$('input[placeholder]').placeholder();
			$("#password").complexify({}, function(valid, complexity){
				if (!valid) {
					$('#complexity').animate({'width':complexity + '%'}).removeClass('valid').addClass('invalid');
				} else {
					$('#complexity').animate({'width':complexity + '%'}).removeClass('invalid').addClass('valid');
				}
				$('#complexity').html(Math.round(complexity) + '%');
			});
var isok=false;
var ischeck=false;
var iscun=false;
var str="";
$("#back").click(function(){
	location.href="/chat/out"; 
}); 
$("#phone").blur(function(){
				var number = $("#phone").val();
				if(number == ""){
					$("#checkphone").empty();
					$("#checkphone").append("手机号不能为空");
					ischeck=false;
					}else{
					$("#checkphone").empty();
				}
				if(/^[0-9][1-9]{10}$/.test(number) == false){	//使用正则表达式
					$("#checkphone").empty();
					$("#checkphone").append("手机号的格式不对");
					ischeck=false;
					}else{
						$("#checkphone").empty();
						ischeck=true;
					}
});	
function hello(){
	   var maxtime = 100; //按秒计算，自己调整!
	   var timer=document.getElementById("minbox");
	   (function CountDown(){
	      var seconds=maxtime;
	      timer.innerHTML=seconds+"秒后可重新发送";
	      if(--maxtime>=0){
	         setTimeout(CountDown,1000);
	      }else{
	    	  location.reload()
	      }
	   })();
	}
$("#send").click(function(){
	if(ischeck==true){
		var phone=$("#phone").val();
		$("#checkphone").load("/chat/ressend",{phone:phone},function(data){
			if(data!="null"){
				var a=confirm("该手机号未被注册，是否前往注册？");
				iscun=false;
				 if(a){
					 location.href="/chat/loadregister";
				 }
			}else{
				iscun=true;
				$("#checkphone").empty();
				$("#send").remove();
				hello();
			}
		})	
	}else{
		alert("手机号格式有误！")
	}
})									
$("#password").blur(function(){
	str=$("#password").val();
	if(/^[a-zA-Z0-9_-]{6,16}$/.test(str)==false){
		$("#checkwd").empty();
		$("#checkwd").append("6到16位（字母，数字，下划线，减号）");
		isok=false;
	}else{
		$("#checkwd").empty();
		isok=true;
	}
});
$("#comm").click(function(){
	if(isok==true&&ischeck==true&&hua==true&&iscun==true){
		var code=$("#code").val();
		var phone=$("#phone").val();
		$("#hb").load("/chat/updatp",{phone:phone,code:code,pwd:str},function(data){
			if(data!="ok"){
				alert("验证码有误");
				$("#hb").empty();
				$("#hb").append("请确认验证码后再提交！验证码5分钟有效。");
			}else{ 
				var ch=confirm("修改成功，是否前往登入？");
				if(ch){
					location.href="/chat/start";
				}else{
					location.reload();	
				}
			}
		});
	}else{
		alert("请根据页面提示完成操作！");
	}
});
});
(function($, window, document, undefined) {
    function SliderUnlock(elm, options, success) {
        var me = this;
        var $elm = me.checkElm(elm) ? $(elm) : $;
        success = me.checkFn(success) ? success : function() {};
        var opts = {
            successLabelTip: "Successfully Verified",
            duration: 200,
            swipestart: false,
            min: 0,
            max: $elm.width(),
            index: 0,
            IsOk: false,
            lableIndex: 0
        };
        opts = $.extend(opts, options || {});
        me.elm = $elm;
        me.opts = opts;
        me.swipestart = opts.swipestart;
        me.min = opts.min;
        me.max = opts.max;
        me.index = opts.index;
        me.isOk = opts.isOk;
        me.labelWidth = me.elm.find('#label').width();
        me.sliderBg = me.elm.find('#slider_bg');
        me.lableIndex = opts.lableIndex;
        me.success = success;
    }
    SliderUnlock.prototype.init = function() {
        var me = this;
        me.updateView();
        me.elm.find("#label").on("mousedown", function(event) {
            var e = event || window.event;
            me.lableIndex = e.clientX - this.offsetLeft;
            me.handerIn();
        }).on("mousemove", function(event) {
            me.handerMove(event);
        }).on("mouseup", function(event) {
            me.handerOut();
        }).on("mouseout", function(event) {
            me.handerOut();
        }).on("touchstart", function(event) {
            var e = event || window.event;
            me.lableIndex = e.originalEvent.touches[0].pageX - this.offsetLeft;
            me.handerIn();
        }).on("touchmove", function(event) {
            me.handerMove(event, "mobile");
        }).on("touchend", function(event) {
            me.handerOut();
        });
    };
    SliderUnlock.prototype.handerIn = function() {
        var me = this;
        me.swipestart = true;
        me.min = 0;
        me.max = me.elm.width();
    };
    SliderUnlock.prototype.handerOut = function() {
        var me = this;
        me.swipestart = false;
        if (me.index < me.max) {
            me.reset();
        }
    };
    SliderUnlock.prototype.handerMove = function(event, type) {
        var me = this;
        if (me.swipestart) {
            event.preventDefault();
            event = event || window.event;
            if (type == "mobile") {
                me.index = event.originalEvent.touches[0].pageX - me.lableIndex;
            } else {
                me.index = event.clientX - me.lableIndex;
            }
            me.move();
        }
    };
    SliderUnlock.prototype.move = function() {
        var me = this;
        if ((me.index + me.labelWidth) >= me.max) {
            me.index = me.max - me.labelWidth - 2;
            me.swipestart = false;
            me.isOk = true;
        }
        if (me.index < 0) {
            me.index = me.min;
            me.isOk = false;
        }
        if (me.index + me.labelWidth + 2 == me.max && me.max > 0 && me.isOk) {
            $('#label').unbind().next('#labelTip').text(me.opts.successLabelTip).css({
                'color': '#fff'
            });
            me.success();
        }
        me.updateView();
    };
    SliderUnlock.prototype.updateView = function() {
        var me = this;
        me.sliderBg.animate({
            'width': me.index
        }, 0);
        me.elm.find("#label").animate({
            "left": me.index + "px"
        }, 0)
    };
    SliderUnlock.prototype.reset = function() {
        var me = this;
        me.index = 0;
        me.sliderBg.animate({
            'width': 0
        }, me.opts.duration);
        me.elm.find("#label").animate({
            left: me.index
        }, me.opts.duration).next("#lableTip").animate({
            opacity: 1
        }, me.opts.duration);
        me.updateView();
    };
    SliderUnlock.prototype.checkElm = function(elm) {
        if ($(elm).length > 0) {
            return true;
        } else {
            throw "this element does not exist.";
        }
    };
    SliderUnlock.prototype.checkFn = function(fn) {
        if (typeof fn === "function") {
            return true;
        } else {
            throw "the param is not a function.";
        }
    };
    window['SliderUnlock'] = SliderUnlock;
})(jQuery, window, document);
$(function() {
    var slider = new SliderUnlock("#slider", {
        successLabelTip: "验证成功"
    }, function() {
        hua=true;
    });
    slider.init();
})
	</script>
</head>
<body id="bigbox">
<button id="back"> &lt; <span>登入</span> </button>
<div id="page-wrap">
<div id="title">重置密码</div>
<div id="checkphone"></div>
<input type="text" name="phone" id="phone" placeholder="请输入您的账号" />
<div class="hei"></div>
<input type="text" name="code" id="code" placeholder="验证码" /><div id="minbox"></div>
<div id="shi"></div>
<input type="submit" name="code" id="send" value="发送验证码" />
<div id="checkwd"></div>
<input type="password" name="password" id="password" placeholder="输入新的密码" />
<div id="hh"></div>
<div id="complexitywrap">
<div id="complexity">密码强度：0%</div>
</div>
<div id="hb"></div>
<div id="demo">
    <div id="slider">
        <div id="slider_bg"></div>
        <span id="label">&gt;&gt;</span> <span id="labelTip">拖动滑块验证</span>
    </div>
     <input type="submit"  id="comm" value="确认提交" />
</div>
</div>
</body>
</html>